<form *ngIf="playlist"
      #playlistForm="ngForm"
      class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Name*</label>
    <div class="col-sm-10">
      <input type="text"
             name="playlistName"
             class="form-control"
             placeholder="Name of your playlist"
             [(ngModel)]="playlist.title"
             required
             appFocusInput>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Description</label>
    <div class="col-sm-10">
          <textarea class="form-control"
                    name="playlistDescription"
                    placeholder="Type a few words that describe the mood of your playlist"
                    [(ngModel)]="playlist.description"
                    rows="5"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Is Public?</label>
    <div class="col-sm-10">
      <app-toggle-switch [(value)]="playlist.isPublic"
                         enabledIcon="fa fa-globe"
                         disabledIcon="fa fa-lock">
      </app-toggle-switch>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-10"><p>* required inputs</p></div>
  </div>
</form>
